<%@ page contentType="text/html; charset=UTF-8" session="false"%>
<%@ include file="/WEB-INF/jspf/import.jspf"%>
<div class="pageContent">
	<br />
	<span id="title">升级奖品设置</span>
	<hr />
	<div layouth="60" style="height: 366px; overflow: auto;">
		<table>
			<thead>
				<tr>
					<td width="30%">车友会等级</td>
					<td width="30%">奖品设置</td>
					<td></td>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${upgradePrize}" var="u">
					<tr>
						<td>${u.value[0].clubLevelName}</td>
						<td id="prize-${u.key}">
							<ol>
								<c:forEach items="${u.value}" var="p">
									<li>${p.prize}</li>
								</c:forEach>
							</ol>
						</td>
						<td>
							<span id="modify-${u.key}" onclick="modify(${u.key});">修改</span>
							<span id="submit-${u.key}" onclick="submit(${u.key});" style="display:none;">确定</span>
							<span id="cancel-${u.key}" onclick="cancel(${u.key});" style="display:none;">取消</span>
							<br /><br />
							<span id="add-${u.key}" onclick="add(${u.key});" style="display:none;">添加</span> <input id="input-add-${u.key}" type="text" size="30" style="display:none">
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
</div>
<script>
	$(function(){
		$('#title').attr('style', 'font-size:20px; color:blue; padding:5px');
		$('table').attr('style', 'padding:10px; width:100%;');
		$('td').attr('style', 'font-size:15px;');
		$('thead tr td').attr('style', 'font-size:15px; padding-bottom:10px');
		$('tr:odd').css('background-color', '#D8FEFF');
		$('td span').css('cursor', 'pointer').css('color', 'blue');
		$('td ol').css('padding','15px').css('list-style', 'decimal');
		$('td ol li').css('font-size', '15px');
	});
	
	// 添加
	function add(seq) {
		var text = $('#input-add-' + seq).val();
		if (text == '') {
			alert("添加项不能为空");
			return;
		}
		if(text.length>100){
			alert("名称长度不能超过100");
			return;
		}
		
		$.post("/admin/club/addUpgradePrize.do", 
		{
			levelId: seq,
			prize: text
		},
		function(data) {
			alert(data.message);
			if (data.statusCode == 200) {
				return navTabSearch(this);
			}
		}, 'json');
	}
	
	var oriData = [];
	// 修改
	function modify(seq) {
		$('#modify-' + seq).css('display', 'none');
		$('#submit-' + seq).css('display', '');
		$('#cancel-' + seq).css('display', '');
		$('#add-' + seq).css('display', '');
		$('#input-add-' + seq).css('display', '');
		
		var text;
		oriData = [];
		$('#prize-' + seq + ' ol li').each(function(index) {
			text = $(this).text();
			oriData.push($(this).html());
			$(this).html("<input type='text' name='prize' value='" + text + "' size='30'>");
		});
	}
	
	// 取消
	function cancel(seq) {
		$('#modify-' + seq).css('display', '');
		$('#submit-' + seq).css('display', 'none');
		$('#cancel-' + seq).css('display', 'none');
		$('#add-' + seq).css('display', 'none');
		$('#input-add-' + seq).css('display', 'none');
		
		var text;
		$('#prize-' + seq + ' ol li').each(function(index) {
			text = oriData[index];
			$(this).html(text);
		});
	}
	
	// 确定
	function submit(seq) {
		var prizes = '';
		var prize = '';
		var flag = true;
		$(":input[name='prize']").each(function() {
			prize = $(this).val();
			
			if (prize == '') {
				alert('修改内容不能为空');
				flag = false;
				return;
			}
			prizes += prize + ",";
		});
		
		if (flag == false) {
			return;
		}
		
		$.post("/admin/club/editUpgradePrize.do", 
		{
			levelId: seq,
			prizes: prizes
		},
		function(data) {
			alert(data.message);
			console.log(data.statusCode);
			if (data.statusCode == 200) {
				return navTabSearch(this);
			}
		}, 'json');
	}
</script>